<template>
  <el-checkbox-group v-model="dataValue" :disabled="disabled" @change="valueChange" style="width: 100%;">
    <el-checkbox
      v-for="(item, index) in option"
      :key="index"
      :label="item.value"
      :disabled="item.disabled">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</template>
<script type="text/javascript">
import XMixIn from './XMixIn'
export default {
  mixins: [XMixIn],
  data () {
    return {
      option: []
    }
  },
  props: {
    options: {
      type: [Array],
      default: Array
    }
  },
  watch: {
    options: {
      handler (options) {
        if (options.length > 0 && typeof options[0] === 'string') {
          this.option = options.map(item => ({ label: item, value: item }))
        } else {
          this.option = options
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
